<template>
	<view>
		<u-navbar leftIconSize="32rpx" title="实名认证" :placeholder="true" :fixed="true" :safeAreaInsetTop="true"
			:autoBack="true" :border-bottom="false"></u-navbar>
		<view class="uploadCard" v-if="!upload">
			<view class="upload">
				<view class="upFront" @click="selectImg('front')">
					<view class="none" v-if="!img1">
						<view class="src">
							<u-icon name="camera-fill" color="#fff" size="78"></u-icon>
						</view>
						上传人像面
					</view>
					<image :src="img1" v-else style="width: 100%;height: 100%;" mode="aspectFill"></image>
				</view>
				<view class="upFront" @click="selectImg('back')">
					<view class="none" v-if="!img2">
						<view class="src">
							<u-icon name="camera-fill" color="#fff" size="78"></u-icon>
						</view>
						上传国徽面
					</view>
					<image :src="img2" v-else style="width: 100%;height: 100%;" mode="aspectFill"></image>
				</view>
				<view class="tips">
					温馨提示请采用标准拍摄，避免反光和模糊，避免照片太小
				</view>
			</view>
			<view class="cardForm">
				<view style="background-color: #fff;padding: 0 20rpx;">
					<u--form :model="form" ref="uForm" :borderBottom="true" labelPosition="top" labelWidth="300">
						<u-form-item :borderBottom="true" label="真实姓名" prop="mobile">
							<u-input border="none" v-model="front.name" placeholder="请输入姓名" />
						</u-form-item>
						<u-form-item :borderBottom="true" label="身份证号" prop="mobile">
							<u-input border="none" v-model="front.idcard" placeholder="请输入身份证号(识别可填充、可修改)" />
						</u-form-item>
					</u--form>
				</view>
				<view class="btn" @click="banknext()">
					下一步
				</view>
			</view>
		</view>
		<view class="uploadBank" v-if="upload">
			<view class="cardForm" >
				<view style="background-color: #fff;padding: 0 20rpx;">
					<u--form :model="form" ref="uForm" :borderBottom="true" labelPosition="top" labelWidth="300">
						<u-form-item :borderBottom="true" label="真实姓名" prop="mobile">
							<u-input border="none" readonly v-model="front.name" placeholder="请输入姓名" />
						</u-form-item>
						<u-form-item :borderBottom="true" label="身份证号" prop="mobile">
							<u-input border="none" readonly v-model="front.idcard" placeholder="请输入身份证号" />
						</u-form-item>
						<u-form-item :borderBottom="true" label="卡号" prop="bank_card">
							<u-input border="none" v-model="form.bank_card" placeholder="请输入银行卡号(识别可填充、可修改)" />
							<view slot="right" class="bankUpIcon" @click="selectImg2('bank_image')">
								<u-icon name="camera-fill" color="#c1c1c1" size="56"></u-icon>
							</view>
						</u-form-item>
						<u-form-item :borderBottom="true" label="开户行" prop="kaihu" @click="khh.typeShow=true">
							<u-input border="none" :readonly="true" v-model="form.kaihu" type="select" 
								placeholder="请输入开户行" />
						</u-form-item>
						<u-form-item :borderBottom="true" label="银行预留手机号" prop="mobile">
							<u-input border="none" v-model="form.mobile" placeholder="请输入手机号" />
						</u-form-item>
					</u--form>
				</view>
				<view class="btn" @click="submit">
					立即认证
				</view>
				<view style="
					display: flex;
					    justify-content: center;
					    margin-top: 40rpx;
					    color: #007AFF;
					    font-size: 24rpx;
				" @click="upload=false">
					返回上一步
				</view>
			</view>
		</view>
		<!-- 开户行 -->
		<u-picker :show="khh.typeShow" title="选择开户行" :singleIndex="khh.defaultIndex[0]" :closeOnClickOverlay="true"
			visibleItemCount="16" @cancel="pickerCancel" :columns="[khh.typeList]" @confirm="khhConfirm">
		</u-picker>
	</view>
</template>

<script>
	import {
		realname
	} from '../../common/auth.api.js'
	import {
		banks
	} from '../../common/bankcard.api.js'
	export default {
		data() {
			return {
				upload: false,
				img1: '',
				img2: '',
				img3: '',
				front: {},
				back: {},
				form: {
					name: '',
					id_card: '',
					mobile: '',
					bank_card: '',
					city1: '',
					bank_id: 0,
					province: 0,
					city: 0

				},
				placeholderStyle: {
					fontSize: '22rpx'
				},
				globalData: [],
				khh: {
					typeShow: false,
					typeList: [],
					typeName: '',
					typeVlaue: [0],
					defaultIndex: [0]
				},
			}
		},
		onShow() {
			this.globalData = getApp().globalData
		},
		onLoad() {
			let user = JSON.parse(uni.getStorageSync('user_info'));
			console.log(user)
			this.img1 = user.idcard_left
			this.img2 = user.idcard_right
			// this.form.name = this.front.name=  user.real_name;
			this.form.id_card = this.front.idcard = user.idcard
			this.form.mobile = user.mobile


			this.getBanks()

		},
		methods: {
			pickerCancel(){
				this.khh.typeShow = false
			},
			returnCenterIndex() {
				this.$u.route({
					type: 'switchTab',
					url: 'pages/center/index'
				})
			},
			// 下一步
			banknext() {
				if (!this.img1) {
					uni.showToast({
						title: '请上传身份证正面',
						icon: 'none'
					})
					return
				}

				if (!this.img2) {
					uni.showToast({
						title: '请上传身份证反面',
						icon: 'none'
					})
					return
				}
				if (!this.form.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
				}
				if (!this.form.id_card) {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none'
					})
				}
				this.upload = true;
			},
			selectImg(e) {
				let _self = this;

				let token = uni.getStorageSync('token')
				console.log(token)
			
				uni.chooseImage({
					count: 1, //默认9
					type: 'image',
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						console.log(res);
						uni.showLoading({
							title: '加载中'
						})
						
						uni.uploadFile({
							url: _self.globalData.APP_API_BASE_URI + '/auth/ocr/idcard',
							filePath: res.tempFilePaths[0],
							name: 'idcard_image',
							formData: {
								'token': token,
								'type': e
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								console.log(data);
								uni.hideLoading()
								if (data.status == "failed") {
									uni.showToast({
										title: data.failedMsg,
										icon: 'none'
									})
								} else {
									if (e == 'front') {
										_self.front = data.data
										_self.img1 = data.data.image_path
										_self.form.name = data.data.name
										_self.form.id_card = data.data.idcard
									}
									if (e == 'back') {
										_self.back = data.data
										_self.img2 = data.data.image_path
									}
								}
							},
							fail: (e) => {

							}
						});
					},
					fail: function(e) {
						console.log(e)
						uni.hideLoading()
					}
				});
			},
			selectImg2(e) {
				let _self = this;
				let token = uni.getStorageSync('token')
				uni.chooseImage({
					count: 1, //默认9
					type: 'image', //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						console.log(res);
						uni.showLoading({
							title: '加载中'
						})
						uni.uploadFile({
							url: _self.globalData.APP_API_BASE_URI + '/api/user/ocr/bank',
							filePath: res.tempFilePaths[0],
							name: 'bank_image',
							formData: {
								'token': token,
							},
							header: {
								"Content-Type": "multipart/form-data",
								"token": token
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								console.log(data);
								uni.hideLoading()
								if (data.status == "failed") {
									uni.showToast({
										title: data.failedMsg,
										icon: 'none'
									})
								} else {
									_self.img3 = res.tempFilePaths[0]
									_self.form.bank_card = data.data.bank_card_number

								}
							},
							fail: (e) => {

							}
						});
					}
				});
			},
			submit() {
				let that = this
				// realname
				if (!this.img1) {
					uni.showToast({
						title: '请上传身份证正面',
						icon: 'none'
					})
					return
				}

				if (!this.img2) {
					uni.showToast({
						title: '请上传身份证反面',
						icon: 'none'
					})
					return
				}
				if (!this.form.bank_card) {
					uni.showToast({
						title: '请输入银行卡号',
						icon: 'none'
					})
					return
				}

				realname(this.form).then(res => {
					uni.$emit('updateUserInfo', {
						msg: '刷新用户信息'
					})
					
					uni.$u.toast('认证成功')
					
					that.$u.route({
						type: 'switchTab',
						url: 'pages/center/index'
					})
					
					
				})
			},

			getBanks() {
				banks().then(res => {
					for (let i = 0; i < res.length; i++) {
						this.khh.typeList.push(res[i].name)

						//xiugai 
						if (this.deCode) {
							if (this.form.kaihu == res[i].name) {
								this.khh.defaultIndex = [i]
							}
						}
					}
					this.kaihuList = res
				})
			},
			
			// 开户行选择
			khhConfirm(e) {
				this.khh.typeShow = false;
				this.form.kaihu = this.khh.typeList[e.indexs[0]]
				this.form.bank_id = this.kaihuList[e.indexs[0]].id
				this.khh.typeVlaue = [e.indexs[0]]
			},
		}
	}
</script>
<style>
	page {
		background-color: #f4f5f7;
	}
</style>
<style scoped lang="less">
	.upFront {
		width: 690rpx;
		height: 300rpx;
		background: #eee;
		margin: 30rpx auto;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.none {
			font-size: 28rpx;

			.src {
				width: 80rpx;
				height: 80rpx;
				border-radius: 100%;
				background-color: #e93e34;
				margin: 0 auto;

				margin-bottom: 15rpx;

				u-icon {
					margin: 0 auto;
					font-size: 100px;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			image {
				display: block;
				margin: 0 auto;
			}

			text-align: center;
		}
	}

	.upload {
		background-color: #fff;
		padding-bottom: 32rpx;
		margin-bottom: 32rpx;
		padding-top: 1px;
	}

	.tips {
		padding: 0 30rpx;
		font-size: 24rpx;
	}

	.cardForm {
		background-color: #fff;
		padding: 25rpx 0;

		.item {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 30rpx;
			font-size: 28rpx;
			height: 100rpx;
			border-bottom: 1px solid #eee;
			position: relative;

			.bankUpIcon {
				position: absolute;
				right: 0rpx;
				top: 0;
				height: 100%;
				display: flex;
				display: flex;
				align-items: center;
				z-index: 99;
				padding: 0 30rpx;
			}

			.span {
				width: 120rpx;
			}

			input {
				height: 80rpx;
				width: 200rpx;
				flex: 1;
			}
		}
	}

	.btn {
		width: 690rpx;
		margin: 0 auto;
		height: 80rpx;
		margin-top: 32rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 8rpx;
		color: #fff;

		background-color: #e66433;
	}
</style>
